<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ascii Data Tables width adjuster example</title>
    <script type="text/javascript" src="../lib/bundle.js"></script>
    <script type="text/javascript">
      var data = [
        ['title', 'description'], 
        ['A Few Good Men', 'In the heart of the nation\'s capital, in a courthouse of the U.S. government, one man will stop at nothing to keep his honor, and one will stop at nothing to find the truth.'], 
        ['Oskars made up movie', 'This movie is here\n\nto show\n\nl\ni\nn\ne\nbreaks'],
        ['Charlie Wilson\'s War', 'A stiff drink. A little mascara. A lot of nerve. Who said they couldn\'t bring down the Soviet empire.'],
        ['Sleepless in Seattle', 'What if someone you never met, someone you never saw, someone you never knew was the only someone for you?']
      ]
      function renderTable(id, data, maxWidth) {
        var output = AsciiTable.run(data, {maxColumnWidth: maxWidth})
        document.getElementById(id).innerHTML = output
        //console.log(output) <- Cool, but spams the console
      }
      function widthUpdated (w){
        renderTable('table', data, w)
        document.getElementById('currentWidth').innerHTML = w
      }
      function setSliderMax() {
        var maxWidth = AsciiTable.getMaxColumnWidth(data)
        document.getElementById('width-slider').max = maxWidth
      }
    </script>
    <style type="text/css">
    body {
      color: #444;
      text-align: center;
    }
    h1 {
      margin-top: 130px;
      text-align: center;
      color: #444;
      font-size: 35px
    }
     #table {
      text-align: left;
      display: block;
      background-color: #ddd;
      color: #222;
      width: 600px;
      height: 500px;
      overflow: auto;
      margin: 50px auto 10px auto;
      padding: 20px;
     }
     #slider-group {
      display: block;
      margin: 10px auto;
      width: 500px;
     }
     #width-slider {
      margin-top: 1px;
      display: inline-block;
      width: 150px;
     }
    </style>
  </head>
  <body onload="setSliderMax(); widthUpdated(39)">
    <h1>Ascii Data Tables width adjuster example</h1>
    <p>
      An easy way to customize the max column with to fit the medium where the table 
      will be pasted / used.
    </p>
    <pre id="table"></pre>
    <div id="slider-group">
      Adjust column maxwidth: 
      <input id="width-slider" type="range" max="70" min="4" value="39" oninput="widthUpdated(this.value)" />
      : <code id="currentWidth"></code>
    </div>
  </body>
</html>
